<template>
  <div class="login-container">
    <el-card class="login-box">
      <h2 class="login-title">用户登录</h2>
      <el-form :model="loginForm" :rules="loginRules" ref="loginFormRef">
        <el-form-item prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入用户名">
            <template #prefix>
              <el-icon><User /></el-icon> <!-- 使用全局注册的图标 -->
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="loginForm.password" type="password" placeholder="请输入密码" show-password>
            <template #prefix>
              <el-icon><Lock /></el-icon> <!-- 使用全局注册的图标 -->
            </template>
          </el-input>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item>
              <el-checkbox v-model="rememberMe" label="记住我" size="large" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item>
              <el-link type="warning">忘记密码</el-link>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button type="primary" class="login-button" @click="handleLogin" :loading="loading">
            登录
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import {Lock, User} from "@element-plus/icons-vue";
  import {post} from "@/api/request.js";
  import {useUserStore} from "@/stores/userStore.js";

  const userStore = useUserStore()  // 状态数据

  const router = useRouter();
  const loginFormRef = ref(null); // 表单引用
  const loginForm = ref({
    username: '',
    password: '',
  });
  const rememberMe = ref(false) // 记住我
  const loading = ref(false); // 登录按钮加载状态

  // 表单验证规则
  const loginRules = {
    username: [
      { required: true, message: '请输入账号', trigger: 'blur' },
    ],
    password: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
    ],
  };

  // 处理登录逻辑
  const handleLogin = () => {
    // 前端验证
    loginFormRef.value.validate((valid) => {
      if (valid) {
        loading.value = true; // 开始加载

        // 远程登录
        post('/auth/login', loginForm.value).then((res) => {
          loading.value = false; // 结束加载
          // 假设登录成功
          if(res.code === 200) {
            const _token = res.data

            userStore.setRememberMe(rememberMe.value)
            userStore.login({ token: _token })

            ElMessage.success(res.message); // 显示成功提示
            router.push({ name: 'Home' }); // 跳转到主页
          } else {
            ElMessage.error(res.message); // 显示错误信息
          }
        })
      } else {
        console.log('表单验证失败');
        return false;
      }
    });
  };
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f2f5;
}

.login-box {
  width: 400px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.login-title {
  text-align: center;
  margin-bottom: 20px;
  color: #303133;
}

.login-button {
  width: 100%;
}
</style>